<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Headers - 10</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles/reset.min.css" />
    <link rel="stylesheet" href="styles/style.css" />
    <link rel="stylesheet" href="styles/header-10.css" />
  </head>
  <body>
    <!-- Header Start -->
    <header class="site-header">
      <div class="site-header__top">
        <div class="wrapper site-header__wrapper">
          <div class="site-header__start">
            <ul class="">
              <li class=""><a href="#">About</a></li>
              <li class=""><a href="#">Contact</a></li>
            </ul>
          </div>
          <div class="site-header__middle">
            <a href="#" class="brand">Brand</a>
          </div>
          <div class="site-header__end">
            <a href="#" class="button">Some action</a>
          </div>
        </div>
      </div>
      <div class="site-header__bottom">
        <div class="wrapper site-header__wrapper">
          <div class="site-header__start">
            <div class="search">
              <button class="search__toggle" aria-label="Open search">
                Search
              </button>
              <form class="search__form" action="">
                <label class="sr-only" for="search">Search</label>
                <input
                  type="search"
                  name=""
                  id="search"
                  placeholder="What's on your mind?"
                />
              </form>
            </div>
          </div>

          <div class="site-header__middle">
            <nav class="nav">
              <button class="nav__toggle" aria-expanded="false" type="button">
                menu
              </button>
              <ul class="nav__wrapper">
                <li class="nav__item"><a href="#">Home</a></li>
                <li class="nav__item"><a href="#">About</a></li>
                <li class="nav__item"><a href="#">Services</a></li>
                <li class="nav__item"><a href="#">Hire us</a></li>
                <li class="nav__item"><a href="#">Contact</a></li>
              </ul>
            </nav>
          </div>

          <div class="site-header__end">
            <a href="#">عربي</a>
          </div>
        </div>
      </div>
    </header>
    <!-- Header End -->

    <script src="js/header-10.js"></script>
  </body>
</html>
